<template>
  <div class="map" id="amap"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null
onMounted(() => {
  AMapLoader.load({
    key: 'd298725b04aeca345887c47bab8d8683', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      'AMap.Autocomplete',
      'AMap.PlaceSearch',
      'AMap.Scale',
      'AMap.OverView',
      'AMap.ToolBar',
      'AMap.MapType',
      'AMap.PolyEditor',
      'AMap.CircleEditor',
      'AMap.Gradient'
    ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    new AMap.Map('amap', {
      // 设置地图容器id
      zoom: 5,
      center: [105.258446, 37.686622],
      showIndoorMap: false,
      viewMode: '3D'
    })
  })
})
</script>

<style scoped lang="scss">
.map {
    width: 100%;
    height: 100%;
}
</style>